
<template>
  <!-- 软件版本查询下拉组件 -->
  <!-- query.ecuModuleId没传时禁用select选择器 -->
  <a-input-group compact>
    <VersionTypeSelect
      v-model="versionType"
      :disabled="!query.ecuModuleId"
      class="version-type-select"
      :append-to-body="false"
      style="width: 80px;"
      @change="changeVersionType"/>
    <a-select
      show-search
      option-filter-prop="children"
      :placeholder="$t('pleaseSelect') + $t('软件版本').toLowerCase()"
      :allow-clear="true"
      :mode="mode"
      :maxTagCount="1"
      :disabled="!query.ecuModuleId"
      v-model="value"
      @change="changeOption"
      style="border-radius:0 4px 4px 0;"
      :style="{width: 'calc(100% - 80px)'}"
    >
      <a-spin
        v-if="isSearch"
        size="small"
        slot="notFoundContent"/>
      <a-select-option v-for="item in options" :key="item" :value="item">
        {{ item }}
      </a-select-option>
    </a-select>
  </a-input-group>
</template>
<script>
import VersionTypeSelect from './VersionTypeSelect'
export default {
  components:{ VersionTypeSelect },
  props: {
    value: {
      type: String,
      default: undefined
    },
    mode: {
      type: String,
      default: 'multiple'
    },
    time: {
      type: Number,
      default: 124578
    },
    query: {
      type: Object,
      default () {
        return null
      }
    }
  },
  data () {
    return {
      versionType: 'TEST',
      options: [],
      isSearch: false
    }
  },
  computed: {
  },
  watch: {
    time: {
      handler (val) {
        if (val === 0) {
          return
        }
        // 初始时有ecuModuleId才调接口
        if (this.query && this.query.ecuModuleId) {
          this.getData()
        }
      },
      immediate: true
    },
    'query.ecuModuleId': {
      handler (val) {
        if (val) {
          this.getData()
        }
      }
    }
  },
  created () {
    this.$store.dispatch('getVersionTypeDictCodeData')
  },
  methods: {
    getData () {
      this.options = []
      this.isSearch = true
      this.$api.allVersion({ ecuModuleId: this.query.ecuModuleId, versionType: this.versionType }).then(res => {
        this.isSearch = false
        res.data.forEach((item) => {
          this.options.push(item.name)
        })
      }).finally(() => {
        this.isSearch = false
      })
    },
    changeOption (val) {
      this.$emit('changeoption', val)
    },
    changeVersionType () {
      this.value = undefined
      this.getData()
    }
  }
}
</script>
